<template>
  <!-- 兑换码管理 -->
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :model="form" label-width="150px" :inline="true">
        <el-row>
          <el-col :span="8">
            <el-form-item label="兑换码">
              <el-input v-model="form.code" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配置日期" width="236">
              <el-date-picker
                v-model="time"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label=" ">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <!-- <el-button type="primary" @click="handleExport">导出</el-button> -->
              <Exprotcomponent :params="form" url="admin/code_export" type="php"></Exprotcomponent>
              <el-button type="primary" @click="toRoutes('addExchangecode')">添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="listDiv" v-loading="tableLoading"></div>
    <el-table ref="tableData" :data="tableData" style="width: 100%">
      <el-table-column
        fixed
        type="index"
        label="编号"
        width="50"
        align="center"
        :index="table_index"
      />
      <el-table-column label="兑换码" prop="code" align="center" width="210px" />
      <el-table-column label="抵扣金额" prop="money" align="center" />
      <el-table-column label="使用范围" prop="serial_middle_count" align="center" width="120px">
        <template slot-scope="scope">
          <div
            style="color: #409eef; cursor:pointer"
            @click="useRange(scope.row.id)"
          >{{scope.row.serial_middle_count || 0}}</div>
        </template>
      </el-table-column>
      <el-table-column label="兑换码状态" prop="status" align="center" width="120px">
        <template slot-scope="scope">{{scope.row.status | statusType}}</template>
      </el-table-column>
      <el-table-column label="创建时间" prop="created_at" align="center" width="160px">
        <!-- <template slot-scope="scope">{{(scope.row.created_at - 0 ) * 1000 | date(1)}}</template> -->
        <template slot-scope="scope">{{scope.row.created_at | dates}}</template>
      </el-table-column>
      <el-table-column label="使用时间" prop="use_time" align="center" width="160px">
        <!-- <template slot-scope="scope">{{(scope.row.use_time - 0 )*1000 | date(1)}}</template> -->
        <template slot-scope="scope">{{scope.row.use_time | dates}}</template>
      </el-table-column>
      <el-table-column label="操作下架" fixed="right" align="center" prop="is_up">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_up"
            @change="switchChange(scope.row.id)"
            :active-value="0"
            :inactive-value="1"
          ></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagesCon">
      <div>
        <el-pagination
          :current-page="form.page"
          :page-sizes="page_sizes"
          :page-size="form.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page_totals"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 使用范围弹窗 -->
    <el-dialog title="使用范围" :visible.sync="dialogFormVisible" width="50%" center>
      <div v-loading="tableLoading1">
        <el-table ref="tableData1" :data="tableData1" style="width: 100%" border>
          <el-table-column label="卡券名称" prop="name" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.name | ticketFn}}</span>
            </template>
          </el-table-column>
          <el-table-column label="零售价" prop="sale_price" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.sale_price | ticketFn}}</span>
            </template>
          </el-table-column>
          <el-table-column label="购买有效期" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.validity_start_time | dates}}~{{scope.row.validity_end_time | dates}}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagesCon">
          <div>
            <el-pagination
              :current-page="form1.page"
              :page-sizes="page_sizes1"
              :page-size="form1.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_totals1"
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
            />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import filter from "@/assets/filter";
import { getList, useList, isCode } from "@/api/quanMange";
import commonFn from "@/utils/common";
export default {
  name: "Exchangecode",
  data() {
    return {
      form: {
        code: "",
        created_at: "",
        page: 1,
        pagesize: 10
      },
      time: null,
      tableData: [],
      page_totals: 0,
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      tableLoading: true,
      dialogFormVisible: false,
      tableLoading1: true,
      tableData1: [],
      form1: {
        id: "",
        page: 1,
        pagesize: 10
      },
      page_sizes1: [10, 30, 50, 100], // 每页显示个数
      page_totals1: 0
    };
  },
  watch: {
    time(val) {
      if (val) {
        this.form.created_at = val ? val[0] + " - " + val[1] : "";
      } else {
        this.form.created_at = "";
      }
    }
  },
  filters: {
    ticketFn(opt) {
      if (opt) {
        return opt;
      } else {
        return "--";
      }
    },
    // 时间戳转化
    dates(e) {
      if (e != 0) {
        // yyyy-MM-dd hh:mm:ss
        return new Date(Number(e) * 1000).format("yyyy-MM-dd");
      } else {
        return "--";
      }
    },
    statusType(opt) {
      return opt == 0 ? "未使用" : opt == 1 ? "已使用" : "";
    }
  },
  mounted() {
    this.list(this.form);
  },
  methods: {
    //   跳转
    toRoutes(name) {
      let route = { name };
      this.$router.push(route);
    },
    //   编码
    table_index(index) {
      return (this.form.page - 1) * this.form.pagesize + index + 1;
    },
    // 列表
    async list(opt) {
      let res = await getList(opt);
      if (res.data.code == 200) {
        this.tableLoading = false;
        this.tableData = res.data.data.data;
        this.page_totals = res.data.data.total;
      } else {
        this.tableLoading = false;
        this.$message({
          message: res.data.msg,
          type: "warning"
        });
      }
    },
    async handleUse(data) {
      let res = await useList(data);
      if (res.data.code == 200) {
        this.tableLoading1 = false;
        this.tableData1 = res.data.data.data;
        this.page_totals1 = res.data.data.total;
        // console.log("res", res.data.data);
      }
    },
    // 使用范围弹窗
    useRange(id) {
      this.dialogFormVisible = true;
      this.form1.id = id;
      let data = {
        id: this.form1.id,
        page: this.form1.page,
        pagesize: this.form1.pagesize
      };
      this.handleUse(data);
    },
    //   操作下架
    switchChange(id) {
      let data = { id };
      console.log(888);
      isCode(data).then(res => {
        console.log("res", res);
        if (res.data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    },
    //   查询
    handleSearch() {
      this.form.page = 1;
      this.list(this.form);
    },
    // 导出
    handleExport() {},
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pagesize = val;
      this.list(this.form);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val;
      this.list(this.form);
    },
    // 改变页面条数
    handleSizeChange1(val) {
      this.form1.pagesize = val;
      this.handleUse(this.form1);
    },
    // 选择页数
    handleCurrentChange1(val) {
      this.form1.page = val;
      this.handleUse(this.form1);
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0px !important;
  background: transparent;
}
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
</style>